import React, { Component } from 'react';
import './Official.css'
class Official extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            offlist:[],
            offthree:[]
        }
    }
    componentDidMount(){
        this.$axios({
            url:"http://127.0.0.1:9115/toplist/detail"
        }).then(res=>{
            console.log(res.list.slice(0,4));
            this.setState(state=>{
                return{
                    offlist:res.list.slice(0,4),
                }
            })
        })
    }
    // 点击跳转页面
    Clickdetail(){
        this.props.history.push(
            {
                pathname:'/sheet',
                id:19723756
            }
        )
    
        
    }
    render() {
        console.log(this.props)
        return (
            <div className="offiaicl">
                <p className="off">官方榜</p>
                {
                    this.state.offlist.map((item,index)=>
                        <div  className="off-up" key={index} onClick={this.Clickdetail.bind(this)}>
                            <img src={item.coverImgUrl}/>
                            <h3 className="offp">{item.updateFrequency}</h3>
                                <div className="off-det">
                                    <p>1.{item.tracks[0].first} - {item.tracks[0].second}</p>
                                    <p>2.{item.tracks[1].first} - {item.tracks[1].second}</p>
                                    <p>3.{item.tracks[2].first} - {item.tracks[2].second}</p>
                                </div>
                        </div>
                    )
                    
                }
                
            </div>
        );
    }
}

export default Official;